<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>

        <h3>GET</h3>
        <form action="/request" method="get">
            <input type="text" name="username" placeholder="用户名">
            <input type="password" name="password" placeholder="密码">
            <input type="submit" value="登录">
        </form>

        <hr>

        <h3>POST</h3>
        <form action="/request" 
              method="post"
              enctype="application/x-www-form-urlencoded">
            <input type="text" name="username" placeholder="用户名">
            <input type="password" name="password" placeholder="密码">
            <input type="submit" value="登录">
        </form>

        <h3>POST</h3>
        <form action="/request" 
              method="post"
              enctype="text/plain">
            <input type="text" name="username" placeholder="用户名">
            <input type="password" name="password" placeholder="密码">
            <input type="submit" value="登录">
        </form>

        <h3>POST</h3>
        <form action="/upload" 
              method="post"
              enctype="multipart/form-data">
            <input type="text" name="username" placeholder="用户名">
            <!-- 注意这里指定的表单控件的名称是 headImage -->
            <input type="file" name="headImage" >
            <input type="submit" value="登录">
        </form>

        <hr>

        <button type="button">发送异步请求</button>

        <script type="text/javascript">
            const btn = document.querySelector( '[type=button]' );
            btn.addEventListener( 'click' , e => {
                e.preventDefault();
                e.stopPropagation();

                // 1、创建可以发送请求接受响应的对象
                let $http = new XMLHttpRequest();
                console.log( $http.readyState );

                let listener = function(){
                    console.log( $http.readyState );
                    if( $http.readyState === $http.DONE ){
                        console.log( '响应行:' );
                        console.log( $http.status , $http.statusText );
                        console.log( '响应头:' );
                        let headers = $http.getAllResponseHeaders();
                        console.log( headers );
                        console.log( '响应体:' );
                        console.log( $http.response );
                        // console.log( $http.getResponseHeader( 'content-type' ) );
                    }
                }

                // 2、监听 readyState 的变化
                $http.addEventListener( 'readystatechange' , listener , false );

                let method = 'post' ;
                let url = '/response' ;
                // 3、打开连接
                $http.open( method , url );

                // 4、对于POST请求则需要设置请求头(content-type)
                if( method.toLowerCase() === 'post' ) {
                    // let type = 'application/x-www-form-urlencoded';
                    // let type = 'text/plain' ;
                    let type = 'application/json' ;
                    $http.setRequestHeader( 'content-type' , type );
                }

                // let data = 'username=马飞燕&gender=靓妹' ;
                let data = Object.create( null );
                data.username = '马飞燕' ;
                data.gender = '靓妹' ;

                data = JSON.stringify( data );

                // 5、发送请求
                $http.send( data ); // 仅POST请求可以通过send函数的参数发送数据

            } , true );
        </script>
        
    </body>
</html>